<template>
  <div class="clearfix">
    <CloudUpload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
      <CloudButton> <CloudIcon type="upload" /> Select File </CloudButton>
    </CloudUpload>
    <CloudButton
      type="primary"
      :disabled="fileList.length === 0"
      :loading="uploading"
      style="margin-top: 16px"
      @click="handleUpload"
    >
      {{ uploading ? "Uploading" : "Start Upload" }}
    </CloudButton>
  </div>
</template>

<script>
  import reqwest from 'reqwest';
  export default {
    title: '9.手动上传 ',
    subTitle: 'beforeUpload 返回 false 后，手动上传文件。',
    data () {
      return {
        fileList: [],
        uploading: false,
      }
    },
    methods: {
      handleRemove (file) {
        const index = this.fileList.indexOf(file);
        const newFileList = this.fileList.slice();
        newFileList.splice(index, 1);
        this.fileList = newFileList;
      },
      beforeUpload (file) {
        this.fileList = [...this.fileList, file];
        return false;
      },
      handleUpload () {
        const { fileList } = this;
        const formData = new FormData();
        fileList.forEach(file => {
          formData.append('files[]', file);
        });
        this.uploading = true;

        // You can use any AJAX library you like
        reqwest({
          url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
          method: 'post',
          processData: false,
          data: formData,
          success: () => {
            this.fileList = [];
            this.uploading = false;
            this.$message.success('upload successfully.');
          },
          error: () => {
            this.uploading = false;
            this.$message.error('upload failed.');
          },
        });
      },
    }
  }
</script>

<style lang="scss">
</style>